{% extends "baseD.html" %}

{% block headtitle %}- Modify Scene{% endblock %}

{% block css %}
	<link href="/live3dstatic/css/modifyScene.css" rel="stylesheet" type="text/css" media="screen" />
{% endblock %}

{% block scripts %}
	<script type="text/javascript" src="/live3dstatic/scripts/canvas.js"></script>
	<script type="text/javascript" src="/live3dstatic/scripts/canvasPoint.js"></script>
	<script type="text/javascript" src="/live3dstatic/scripts/canvasPolygon.js"></script>
	<script type="text/javascript" src="/live3dstatic/scripts/modify2D.js"></script>
	
	<script type="text/javascript">
		var modify2D;
		
		loadImage('{{scene.url}}', init2D, null);

		function getFx(){
				var imW = getW();
				return imW/720.0;
		}
				
		function getFy(){
				var imH = getH();
				return imH/540.0;
		}
		
		function init2D(){
			modify2D = new Modify2D();
		
			// add all the correspondences.
			{% if scene.calibrated %}
				{% for corr in allCorrespondences %}
					modify2D.addPoint({{corr.index}}, {{corr.u}}, {{corr.v}}, {{corr.reprojectedU}}, {{corr.reprojectedV}}, {{corr.pixelProjectionError}}, {% ifequal corr.parentMeshes 0 %} true {% else %} false {% endifequal %})
				{% endfor %}
			{% else %}
				{% for corr in allCorrespondences %}
					modify2D.addPoint({{corr.index}}, {{corr.u}}, {{corr.v}}, {{corr.u}}, {{corr.v}}, 0, {% ifequal corr.parentMeshes 0 %} true {% else %} false {% endifequal %})
				{% endfor %}
			{% endif %}
			
			// add all the meshes.
			var mapping = null;
			{% for mesh in meshes %}
				mapping = new Array({%for m in mesh.correspondenceMapping%}{{m}}{%if not forloop.last%},{%endif%} {%endfor%});
				triangles = new Array({%for t in mesh.triangles%}{{t}}{%if not forloop.last%},{%endif%} {%endfor%});
				modify2D.addTriangle(mapping, triangles, {{mesh.index}})
			{% endfor %}
			
			modify2D.drawEverything();
			{% if scene.calibrated %}
				modify2D.fillInErrors();
			{% endif %}
			modify2D.unselectAllMeshes();
			modify2D.unselectAllPoints();
		}
	</script>
{% endblock %}

{% block onload %}{% endblock %}

{% block divtitle %}- Modify Scenes{% endblock %}

{% block content %}
    <div id="contentpage" style="margin-left:40px; margin-right:40px;">
	{% if user %}
	<div id="container">
		<div id="optionspanel">
			<div class="group">
				<h1 style="margin-top:20px; margin-bottom:10px">
				{% if scene.name %}
					 {{scene.name}}
				{% endif %}
				 </h1><br/>
				{% comment %}
					{% for i in 12345|make_list %}
							<!--TODO: <a href="vote?scene={{scene.id}}&amp;rate={{forloop.counter}}">-->
						
							<img class="ratinglink" src="/live3dstatic/images/star.png">
						
							<!--TODO: </a>-->
					{% endfor %}
					 <br/>
					Rating: {{scene.ratingAverage}}
				{% endcomment %}	
				{% if meshes %}
					<h3>Meshes</h3><br/>
					<div class='optionspanel'>
						<table style="table-layout:fixed; width:100%">
							<tr> <th style="text-align:left; vertical-align:bottom;"> Name </th>
								{% if scene.calibrated %}
								 <th style="text-align:center; vertical-align:bottom;"> Average Error</th>
								 {% endif %}
								 {% if admin %}
								 <th style="text-align:right; vertical-align:bottom;"> Rewrite Mesh </th>
								 {% endif %}
							</tr>
							{% for mesh in meshes %}
							<tr>
								<td style="text-align:left; vertical-align:bottom;">
									<input type="checkbox" name="meshCheckList" id="mesh{{ mesh.index }}" onchange="modify2D.toggleCanvasMeshSelection({{mesh.index}})"
										{% if mesh.deletable %}{%else%} disabled {% endif %}>
									<label for="mesh{{ mesh.index }}" > {{ mesh.name }}</label>
								</td>
								{% if scene.calibrated %}
								<td style="text-align:center; vertical-align:bottom;">
									<span id="mesh{{mesh.index}}error"></span> px
								</td>
								{% endif %}
								
								{% if admin %}
								 <td style="text-align:right; vertical-align:bottom;"> <form action='adminModify' method='post'>
										<input type='hidden' name='scene' value='{{scene.index}}'>
										<input type='hidden' name='rewriteMesh' value='{{mesh.index}}'>
										<input type='submit' style="cursor:pointer;" value='Rewrite Mesh'>
									  </form>
								</td>
								 {% endif %}
							</tr>
							{% endfor %}
						</table>
						
						</div>

				
				{% endif %}
				
				{% if pointCorrespondences %}
					<h3>Points</h3>
					<div class='optionspanel'>
						
							<table>
								<tr> <th> Name </th> 
								{% if scene.calibrated %}
								     <th> Error (px) </th>
									 {% endif %}
									 </tr>
								{% for corr in pointCorrespondences %}
								<tr>
									<td>
										<input type="checkbox" name="corrCheckList" id="corr{{ corr.index }}" onchange="modify2D.toggleCanvasPointSelection({{corr.index}})"
											{% if corr.deletable %}{%else%} disabled {% endif %}>
										<label for="corr{{ corr.index }}" > Point {{ corr.index }}</label>
										&nbsp; &nbsp; &nbsp;
									</td>
									{% if scene.calibrated %}
									<td>
										<span id="corr{{corr.index}}error">{{corr.pixelProjectionError|floatformat}}</span>
									</td>
									{% endif %}
								</tr>
								{% endfor %}
							</table>
							
							
					</div>
				
				{% endif %}

				<form id="meshBoxForm" method="post" action="delete" onsubmit="return modify2D.dumpToHTML()">
					<input type="hidden" name="points" id="pointsSelected" value="">
					<input type="hidden" name="meshes" id="meshesSelected" value="">
					<input type="hidden" name="scene" value="{{scene.index}}">
					<input type="Submit" style="cursor:pointer;" value="Delete Selected Meshes and Points" />
					<div id="warning"></div>
				</form>
				
				<span style="margin:5px"><hr/></span>

				{% if admin %}
				<h3>Administrator Options</h3>
				<table style="table-layout:fixed;width:100%"><tr><td style="width:50%; text-align:center">
					<form action='adminModify' method='post' onsubmit="return confirm('Are you sure you want to delete the entire scene?  This is irreversible.');">
						<input type='hidden' name='scene' value='{{scene.index}}'>
						<input type='hidden' name='deleteScene' value='yes'>
						<input type='hidden' name='redirTo' value='viewAll'>
						<input type='submit' style="cursor:pointer;" value='Delete Scene'>
					</form>
				</td><td  style="width:50%; text-align:center">
					<form action='adminModify' method='post'>
						<input type='hidden' name='scene' value='{{scene.index}}'>
						<input type='hidden' name='recalibrate' value='yes'>
						<input type='submit' style="cursor:pointer;" value='Recalibrate Scene'>
					</form>
				</td></tr></table>
				<span style="margin:5px"><hr/></span>
				{% endif %}

				<h3>Other Options</h3>
				<div class='optionspanel'>
					<center>
					<input type="button" style="cursor:pointer;" value="Scene Viewer" onclick="parent.location='viewScene?scene={{ scene.index}}'">
					<input type="button" style="cursor:pointer;" value="Contribute to Scene" onclick="parent.location='build?scene={{ scene.index }}'">
					</center>
				</div>
				
				<span style="margin:5px"><hr/></span>
				
				<p> You can delete an object in a scene if
				<ol>
					<li> You created the object, or </li>
					<li> You created the scene. </li>
				</ol>
				Make sure you are logged in when you create or add to scenes.
				</p>
				
			</div>
			
			
		</div>
		<div id="imagepanel">
			<canvas id='canvasObject' width="100%" height="100%" onclick="modify2D.click(event,getFx(),getFy())">
				Your browser does not support the canvas element, and cannot use this application.
			</canvas>
			
			<br/><br/>Signed in as {{username}}.  <a href="{{logOutURL}}">Log out</a>
		</div>
		<!--
		
		<div id="mappanel">
			<div class="group">
				<div id='map3d'></div>
				<input type="checkbox" onchange="toggleBuildings();" id="showBuildings" checked/>
				<label for="showBuildings">  Show Buildings </label>
					
				<input type="checkbox" onchange="toggleGrayBuildings();" id="showGrayBuildings" checked/>
				<label for="showGrayBuildings">  Show Gray Buildings </label>
			</div>
		</div>
		-->
		<span id="sizeU" style="display:none">
		<span id="sizeV" style="display:none">
		<span id="error"></span>
		
	</div>
{% else %}
	<div class="group">
		You must be logged in to view this page.
		Click <a href="{{logInURL}}">here</a> to log in.
	</div>
{% endif %}


<div style="clear: both;"></div>
    </div><!-- end contentpage --> 
{% endblock %}
		
{% block scripts2 %} {% endblock %}